<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>评分作品</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css" type="text/css" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/app.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/ie/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/respond.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/excanvas.js"></script>
  <![endif]-->
    <style>
      .coverImg{
        width: 100%;
        height: 25%;
      }
    </style>
</head>
<body class="">

  <section class="vbox" id="bjax-el">

    <section class="scrollable padder-lg">
      <h2 class="font-thin m-b">评分作品</h2>
      <div class="row row-sm">


          <c:forEach var="aiticle" items="${articleList}">
            <!-- 一个视频-->
            <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
              <div class="item">
                <div class="pos-rlt">
                  <div class="bottom">
                    <span class="badge bg-info m-l-sm m-b-sm">${aiticle.time}</span><!-- 显示视频的时间-->
                  </div>
                  <div class="item-overlay opacity r r-2x bg-black">
                    <div class="text-info padder m-t-sm text-sm">
                      <!-- 评分的五角星 不能评价的显示为0.0 可以评价的显示之后为评价好的分数-->
                      <c:choose>
                        <c:when test="${aiticle.great==null}">
                          <i class="fa fa-star"></i> 待
                        </c:when>
                        <c:otherwise>
                          <i class="fa fa-star"></i> ${aiticle.great}
                        </c:otherwise>
                      </c:choose>
                    </div>
                    <div class="center text-center m-t-n">
                      <!-- 播放键 -->
                      <a href="<%=(basePath)%>article/getDetail/${aiticle.id}" target="body">
                        <i class="icon-control-play i-2x"></i>
                      </a>
                    </div>
                    <div class="bottom padder m-b-sm"><!-- 点赞-->
                      <c:choose>
                        <c:when test="${aiticle.isChooseLike==0}">
                          <a class="btn  pull-right" data-toggle="button" onclick="like1(${aiticle.id})" >
                            <i class="fa fa-heart-o text"></i>
                            <i class="fa fa-heart text-active text-danger"></i>
                            <span id="num1${aiticle.id}">${aiticle.likeNum}</span>

                          </a>
                        </c:when>
                        <c:otherwise>
                          <a class="btn  pull-right active" data-toggle="button" onclick="like2(${aiticle.id})">
                            <i class="fa fa-heart text-active text-danger"></i>
                            <i class="fa fa-heart-o text"></i>
                            <span id="num2${aiticle.id}">${aiticle.likeNum}</span>

                          </a>
                        </c:otherwise>
                      </c:choose>
                    </div>
                  </div>
                  <a href="#">
                    <c:choose>
                      <c:when test="${aiticle.coverUrl!=null}">
                        <img src="<%=(basePath)%>${aiticle.coverUrl}" alt="" class="r r-2x img-full coverImg">
                      </c:when>
                      <c:otherwise>
                        <img src="${pageContext.request.contextPath}/images/m40.jpg" alt="" class="r r-2x img-full coverImg">
                      </c:otherwise>
                    </c:choose>
                  </a>
                </div>
                <div class="padder-v">
                  <b class="text-ellipsis">${aiticle.title}</b>
                  <a class="text-ellipsis text-xs text-muted">By ${aiticle.authorName}</a><!-- 链接到上传者的主页-->
                </div>
                <input type="hidden" id="isChooseLike${aiticle.id}" value="${aiticle.isChooseLike}">

              </div>
            </div>
            <!-- ／一个视频-->
          </c:forEach>
        </div>
          <!-- 上传的可评分作品 -->
          <div class="text-center m-t-lg m-b-lg">
            <ul class="pagination pagination-md">
              <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
              <li class="active"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
            </ul>
          </div>

      </section>
  </section>

  <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
  <script src="${pageContext.request.contextPath}/layer/layer.js"></script>

  <!-- Bootstrap -->
  <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
  <!-- App -->
  <script src="${pageContext.request.contextPath}/js/app.js"></script>
  <script src="${pageContext.request.contextPath}/js/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/app.plugin.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/demo.js"></script>
  <script>
    function like1(data) {
      //alert(data);
      var isChooseLike=$("#isChooseLike"+data).val();
      var num=parseInt($("#num1"+data).text());
      if (isChooseLike > 0){
        $("#isChooseLike"+data).val(0);
        $("#num1"+data).html(num-1);
      }else {
        $("#isChooseLike"+data).val(1);
        $("#num1"+data).html(num+1);
      }
      addChangeToDataBase(data);
    }

    function like2(data) {
      //alert(data);
      var isChooseLike=$("#isChooseLike"+data).val();
      var num=parseInt($("#num2"+data).text());
      if (isChooseLike > 0){
        $("#isChooseLike"+data).val(0);
        $("#num2"+data).html(num-1);
      }else {
        $("#isChooseLike"+data).val(1);
        $("#num2"+data).html(num+1);
      }
      addChangeToDataBase(data);

    }

    function addChangeToDataBase(articleId) {
      var regInfo={
        articleId:articleId
      };
      $.ajax({
        contentType:"application/json",
        url:getRootPath()+"/like/addOrRemove",
        type:"post",
        dataType:"json",
        data:JSON.stringify(regInfo),
        success:function (data) {
          if (data==0){
            layer.msg("保存失败", {time: 3000, icon:2});
          }else if (data==2){
            layer.msg("请先登录", {time: 3000, icon:2});
          }
        },
        error:function (error) {
          layer.msg('连接失败！', {time: 3000, icon:5});
        }

      });
    }
    function getRootPath() {
      var curWwwPath = window.document.location.href;
      var pathName = window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathName);
      var localhostPaht = curWwwPath.substring(0, pos);
      var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
      return (localhostPaht + projectName);
    }
  </script>
</body>
</html>